<template>
	<!-- 订单支付 -->
	<view>
		<MyNavbar title="订单支付" />
		
		<div v-if="ticketData">
			<u-cell style="background-color: #FFFFFF;" title="小栗旬理发店">
				<div slot="label">
					<div class="flex">
						<div>
							<u-image width="200rpx" height="200rpx" :src="ticketData.orderImage" />
						</div>
						<div style="margin-left: 12rpx;">
							<div>{{ticketData.orderTitle}}</div>
							<div>场次：{{ticketData.specName}}</div>
							<div style="color: red;"><span>￥</span>{{ticketData.totalPrice}}</div>
						</div>
					</div>
				</div>
			</u-cell>
			
			<u-cell style="background-color: #FFFFFF;margin-top: 24rpx;" title="支付方式">
				<div slot="label">
					<u-radio-group 
						v-model="activePayment"
					    placement="column"
					>
						<u-radio 
							v-for="item in payments"
							:customStyle="{marginBottom: '8px'}"
							activeColor="red" 
							:name="item.uid"
							:label="item.name"
						>
						</u-radio>
					</u-radio-group>
				</div>
			</u-cell>
		</div>
		
		
		<u-tabbar
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<div style="width: 100%;height: 100%;" class="flex flex-center">
				<div class="flex" style="padding: 0 24rpx;">
					合计：<div style="color: red;"><span>￥</span>{{ticketData.totalPrice}}</div>
				</div>
				<div style="width: 0; flex:1;padding-right: 24rpx;" class="flex">
					<u-button type="primary" text="支付" @click="onClickSubmit()"></u-button>
				</div>
			</div>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ticketData: {
					orderTitle: '全国巡剪-南宁站',
					orderImage: 'https://static01.imgkr.com/temp/6d51195d25494fd7afbc7764cbf2decf.jpg',
					specName: '2022-02-22',
					totalPrice: '80',
				},
				
				payments: [
					{uid: 'wx', name: '微信',},
					{uid: 'zfb', name: '支付宝',}
				],
				activePayment: 'wx',
			}
		},
		methods: {
			// 提交订单
			onClickSubmit(){
				
			},
		}
	}
</script>

<style>

</style>
